<template>
  <div class="page">
    <!-- Form -->
    <Form
      ref="formRef"
      class="page-form"
      :form="form"
      :config="config"
      :name="name"
      search
      @search-form="searchForm"
      @reset-form="resetForm"
    >
      <template #inputNumber="{ data }">
        <span>{{ data.text }}</span>
      </template>
    </Form>
    <!-- Table -->
    <div class="page-table">
      <TableButtons
        class="mb10"
        layout="upload,download"
        @click="clickTableButtons"
      />
      <Table :columns="columns" :data="list">
        <template #status="{ scope: { row } }">
          <span :class="row.status === 1 ? 'status-primary' : 'status-danger'">
            {{ statusEnums[row.status] }}
          </span>
        </template>
        <template #operation="{ scope: { row } }">
          <el-link type="primary" :underline="false" @click="editHandle(row)">
            编辑
          </el-link>
          <el-popconfirm title="确认删除?" @confirm="confirmDeleteEvent">
            <template #reference>
              <el-link
                type="danger"
                :underline="false"
                @click="deleteHandle(row)"
              >
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </Table>
      <!-- Pagination -->
      <Pagination :pagination="pagination" />
    </div>
    <!-- Dialog -->
    <DialogAdd ref="dialogAddRef" :current="current" />
    <DialogUpload ref="dialogUploadRef" />
  </div>
</template>

<script setup>
// components
import Form from '@/components/Form/Form.vue'
import TableButtons from '@/components/TableButtons/TableButtons.vue'
import Table from '@/components/Table/Table.vue'
import Pagination from '@/components/Pagination/Pagination.vue'
import DialogAdd from './add.vue'
import DialogUpload from './upload/index.vue'
// hooks
import useForm from '@/hooks/useForm'
import useTable from '@/hooks/useTable'
// api
import { getStaffManHour } from '@/api/staff'
// others
import { ref } from 'vue'
import { formData, formConfig, tableColumns, statusEnums } from './config'
import { debounce } from 'lodash'
import { ElMessage } from 'element-plus'

// const { proxy } = getCurrentInstance()

/** Form */
const formRef = ref()
const { form, config, submitForm, resetFormData } = useForm({
  formRef,
  formData,
  formConfig
})
const searchForm = async () => {
  submitForm(() => {
    getTableList(form)
  })
}
const resetForm = () => {
  resetFormData()
  searchForm()
}
/** Table */
const {
  list,
  columns,
  pagination,
  doResult: getTableList
} = useTable({
  request: getStaffManHour,
  tableColumns
})
/** TableBUttons */
const clickTableButtons = (item) => {
  if (item.value === 'upload') {
    uploadHandle()
  }
}

/** 新增 编辑 删除 */
const dialogAddRef = ref(null)
const dialogUploadRef = ref(null)
const current = ref(null)
const uploadHandle = () => {
  current.value = null
  dialogUploadRef.value.show()
}
const editHandle = (row) => {
  current.value = row || null
  dialogAddRef.value.show()
}
// 删除
const deleteHandle = (row) => {
  current.value = row || null
}
const confirmDeleteEvent = () => {
  deleteApiPost()
}
const deleteApiPost = debounce(() => {
  setTimeout(() => {
    ElMessage.success('删除成功！')
  }, 200)
}, 200)
</script>

<style lang="less" scoped></style>
